<template>
    <!--width: 'calc(100vw - ' + (sidebarWidth + 50) + 'px)', -->
    <div>
        <md-editor
            v-if="!preview"
            :model-value="modelValue"
            :style="{width: '100%', height}"
            :toolbars-exclude="toolbarsExclude"
            @update:modelValue="update"
            @onHtmlChanged="change"
        />
        <el-dialog
            v-model="preview"
            title="预览"
            fullscreen
            center
            append-to-body
            @open="handleToc"
            @closed="handleToc"
        >
            <md-editor
                v-if="preview"
                v-model="modelValue"
                preview-only
                :style="{width: '100%', height: '85vh'}"
            />
        </el-dialog>
    </div>
</template>

<script>
import MdEditor from 'md-editor-v3';

export default {
    name: "MarkdownEditor",
    components: { MdEditor },
    props: {
        height: {
            type: String,
            default: () => '85vh'
        },
        modelValue: {
            type: String,
            default: () => ''
        }
    },
    data() {
        return {
            preview: false,
            toolbarsExclude: ['pageFullscreen', 'fullscreen', 'github'],
            catalog: null,
            showToc: false
        }
    },
    mounted() {
        this.handleToc();
    },
    methods: {
        update(e) {
            this.$emit('update:modelValue', e);
        },
        change(e) {
            this.showToc = this.modelValue.indexOf('[TOC]') > -1;
            if (this.showToc) {
                this.$nextTick(() => {
                    e = e.replaceAll('[TOC]', '');
                    let toc = '';
                    document.querySelectorAll(".md-preview [id^='heading-']").forEach(elem => {
                        let  level = elem.tagName.substr(1);
                        let text = elem.children[0].innerText;
                        toc += `<a href="#${elem.id}" style="margin: 0 0 0 ${level * 15}px">${text}</a><br>`;
                    });
                    document.querySelector('.md-preview').innerHTML = toc + e;
                    e = toc + e;
                });
            }
            this.$emit('htmlChange', e);
        },
        handleToc() {
            this.$nextTick(() => {
                this.$nextTick(() => {
                    if (this.modelValue.indexOf('[TOC]') > -1) {
                        let toc = '';
                        document.querySelectorAll(".md-preview [id^='heading-']").forEach(elem => {
                            let  level = elem.tagName.substr(1);
                            let text = elem.children[0].innerText;
                            toc += `<a href="#${elem.id}" style="margin: 0 0 0 ${level * 15}px">${text}</a><br>`;
                        });
                        let previewHtml = document.querySelector('.md-preview').innerHTML;
                        document.querySelector('.md-preview').innerHTML = toc + previewHtml;
                    }
                    let toolbarLeft = document.querySelector(".md-toolbar-left");
                    if (toolbarLeft) {
                        const iconSvg = `<svg class="md-icon" aria-hidden="true" viewBox="0 0 1024 1024">
                                  <path d="M585.86803606 585.86803606a20.36802471 20.36802471 0 0 1 28.78680846 0l101.02540254 100.97108801V627.41880646l0.19010178-2.77005136A20.36802471 20.36802471 0 0 1 756.41629648 627.41880646v115.41880708l-0.21725872 2.44416298a13.57868292 13.57868292 0 0 1-13.36142422 11.13451996h-115.41880708l-2.77005136-0.19010177a20.36802471 20.36802471 0 0 1-17.59797334-20.17792294l0.19010177-2.77005135a20.36802471 20.36802471 0 0 1 20.17792293-17.59797336h59.47463215l-101.02540255-101.02540254-1.98248732-2.28121876a20.36802471 20.36802471 0 0 1 1.98248732-26.5055897z m-147.73607212 0a20.36802471 20.36802471 0 0 1 1.98248732 26.5055897l-1.98248732 2.28121876-101.02540255 101.02540254h59.47463215a20.36802471 20.36802471 0 0 1 20.17792293 17.59797336l0.19010177 2.77005135a20.36802471 20.36802471 0 0 1-17.59797334 20.17792294L396.58119354 756.41629648H281.16238646a13.57868292 13.57868292 0 0 1-13.36142422-11.13451996L267.58370352 742.83761354v-115.41880708a20.36802471 20.36802471 0 0 1 40.54594764-2.77005136l0.19010178 2.77005136v59.42031763l101.02540253-100.97108803a20.36802471 20.36802471 0 0 1 28.78680847 0zM742.83761354 267.58370352a13.57868292 13.57868292 0 0 1 13.36142422 11.13451996L756.41629648 281.16238646v115.41880708a20.36802471 20.36802471 0 0 1-40.54594764 2.77005136L715.68024706 396.58119354V337.16087593L614.65484453 438.13196394a20.36802471 20.36802471 0 0 1-30.76929579-26.5055897l1.98248732-2.28121876 101.02540255-101.02540254h-59.47463215a20.36802471 20.36802471 0 0 1-20.17792294-17.59797336L607.05078176 287.95172823a20.36802471 20.36802471 0 0 1 17.59797334-20.17792294L627.41880646 267.58370352h115.41880708zM396.58119354 267.58370352l2.77005136 0.19010177a20.36802471 20.36802471 0 0 1 17.59797334 20.17792294l-0.19010177 2.77005135a20.36802471 20.36802471 0 0 1-20.17792293 17.59797336H337.1065614l101.02540254 101.02540253 1.98248732 2.28121877a20.36802471 20.36802471 0 0 1-30.76929578 26.5055897L308.31975294 337.16087593V396.58119354l-0.19010178 2.77005136A20.36802471 20.36802471 0 0 1 267.58370352 396.58119354V281.16238646l0.21725872-2.44416298A13.57868292 13.57868292 0 0 1 281.16238646 267.58370352h115.41880708z"  ></path>
                                </svg>`;
                        let div = document.createElement("div");
                        div.innerHTML = iconSvg;
                        div.className = 'md-toolbar-item';
                        div.title = '全屏预览';
                        div.onclick = () => {
                            this.preview = true;
                        };
                        toolbarLeft.appendChild(div);
                    }
                });
            });
        }
    }
}
</script>

<style scoped>
    .md-previewOnly ::v-deep(.md-preview) {
        padding: 20px 5vw;
    }
    ::v-deep(.el-dialog__body) {
        color: black;
    }
    ::v-deep(.md-preview-default blockquote p) {
        padding: 0;
        margin: 0.5em 0;
    }
</style>
